<template>
  <view class="shopdetail">
    <!-- 适配状态栏 -->
    <view class="status_bar"></view>
    <!-- #ifndef MP-WEIXIN-->
    <!-- 小程序不需要返回（自带） -->
    <view class="back_button" @click="leftClick"
      ><text class="custom-icon custom-icon-jiantou2"></text
    ></view>
    <!-- #endif -->
    <view class="swiper_box">
      <swiper class="swiper" circular>
        <swiper-item v-for="(item, index) in data.img_list" :key="index">
          <image class="img" :src="item.path" mode="aspectFit"></image>
          <!-- <view class="showPage">{{ index + '/' +data.img_list.length }}</view> -->
        </swiper-item>
      </swiper>
      <view class="countdown" v-if="timestamp"
        >距结束
        <u-count-down
          class="time"
          :show-days="true"
          :timestamp="timestamp"
          separator="zh"
          color="#fff"
          separator-color="#fff"
          bg-color="#3f3f3f"
        ></u-count-down>
      </view>
    </view>
    <view class="shopdescibe">
      <view class="">
        <view class="tags flex-middle">
          <text class="tag" v-if="data.datum_activity">{{
            data.datum_activity
          }}</text>
          <view
            class="tag rule"
            v-if="data.datum_activity == '满减'"
            v-for="item in data.full_activity_rule"
          >
            满{{ item.price }}减{{ item.reduce }}</view
          >
          <view
            class="tag gift"
            v-if="data.datum_activity == '满赠'"
            @click="showGiftList = !showGiftList"
          >
            <text class="over"
              >满{{ data.full_activity_rule[0].price }}送
              <template v-for="good in data.full_activity_rule[0].goods"
                >{{ good.goods_name }}{{ good.num
                }}{{ good.spu_name }}、</template
              >
            </text>
            <u-icon
              class="icon"
              :name="showGiftList ? 'arrow-down' : 'arrow-up'"
            ></u-icon>
            <view
              class="giftLists"
              v-show="showGiftList"
              v-for="(item, index) in data.full_activity_rule"
            >
              <view class="list"
                >满{{ item.price }}送
                <block v-for="good in item.goods"
                  >{{ good.goods_name }}{{ good.num }}{{ good.spu_name }}、
                </block>
              </view>
              <!-- <view class="list">满100送AD钙奶x1、康师傅桶面、卫龙辣条x1</view> -->
            </view>
          </view>
        </view>
        <view class="flex flex_row_between">
          <view class="">
            <view class="flex">
              <view class="shop_name">
                <text class="bold">{{ data.name }}</text>
              </view>
              <view class="flex flex_col_center" v-if="!data.datum_activity">
                <text
                  v-for="(item, index) in data.datum"
                  :key="index"
                  class="red_tag"
                  >{{ item.title }}</text
                >
              </view>
            </view>
            <!-- <view class="tag gift" @click="showGiftList = !showGiftList">
								<text class="over">满100送AD钙奶x1、康师傅桶面、卫龙辣条x1</text>
								<u-icon class="icon" :name="showGiftList?'arrow-down' : 'arrow-up'"></u-icon>
								<view class="giftLists" v-show="showGiftList">
									<view class="list">满100送AD钙奶x1、康师傅桶面、卫龙辣条x1sdfsfdfs</view>
									<view class="list">满100送AD钙奶x1、康师傅桶面、卫龙辣条x1</view>
								</view>
							</view> -->
          </view>
          <!-- <view class="collect flex flex_col_center" @click="collectAction"
						:style="{ color: is_collect == 1 ? '#6D45EF' : '#ADAEAF' }">
						<text class="custom-icon custom-icon-xingxing"></text>
						<text>收藏</text>
					</view> -->
        </view>
        <view class="twelve_font desc text-color">
          <!-- <view>商品描述</view> -->
          <view>{{ describe }}</view>
        </view>

        <view class="buy_num">
          <view class="flex-btw">
            <my-stepper
              :val="willBuyNum"
              :min="min"
              :limit="limit"
              :inventory="max"
              @plus="addAction"
              @minus="subAction"
              @showKey="
                $refs.keyboard.open(data.is_standard, 0, min, max, limit)
              "
            >
            </my-stepper>
            <!-- v-show="canshowprice" -->
            <view>
              <text class="red_font sixteen" v-if="current_price == 1">{{
                showPrice
              }}</text>
              <text class="red_font sixteen" v-else
                >{{ showPrice }}/{{ unit }}</text
              >
              <text class="red_font old_price sixteen" v-if="oldPrice"
                >￥{{ oldPrice }}/{{ unit }}</text
              >
            </view>
          </view>
          <view class="buynum twelve_font gray_font">
            <!-- 库存应该按规格 -->
            <text v-if="min > 0">起订量：{{ min }}</text>
            <text v-if="limit > 0" style="margin-left: 20rpx"
              >库存：{{ max }}</text
            >
          </view>
        </view>
      </view>
      <view class="select_ware flex flex_row_between">
        <view class="flex">
          <view style="padding: 10rpx; text-align: center; white-space: nowrap"
            >规格：</view
          >
          <view style="display: flex; flex-wrap: wrap">
            <text
              v-for="(item, index) in data.spu"
              :key="index"
              class="spec"
              :class="{ active: checked == index }"
              @click="changeSpe(index)"
              >{{ item.spu_name }}</text
            >
          </view>
        </view>
      </view>
      <view class="twelve_font describe">
        <!-- <rich-text :nodes="data.detail" type = 'node'></rich-text> -->
        <rich-text :nodes="info"></rich-text>
      </view>
    </view>

    <!-- </scroll-view> -->
    <view class="buy flex-around">
      <image class="img" :src="cartImg" @click="toCart" mode=""></image>
      <view class="add_to_cart" @click="addToCart">加入购物车</view>
    </view>
    <my-keyboard @confirm="inputPrice" ref="keyboard"></my-keyboard>
    <u-mask :show="showMask"></u-mask>
    <my-tabar :types="2" ref="tabar" current="0"></my-tabar>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { $https } from "@/static/js/request.js";
import parseHtml from "@/static/js/parseHtml.js";
import MixinShowprice from "@/static/js/mixinshowprice.js";
export default {
  computed: {
    ...mapState(["companyInfo"]),
  },
  data() {
    return {
      loginVolid: null, //是否强制登录
      checked: 0,
      isCollect: 1,
      spuId: null, //规格id
      imgList: [],
      // detail:'',
      info: [],
      data: {},
      index: null,
      min: 0, //起订量
      max: 0, //库存
      limit: 0,
      showPrice: 0, //显示的价格
      oldPrice: null,
      unit: 0, //显示的单位
      is_collect: 0,
      willBuyNum: null,
      describe: "",
      cartImg: "../../static/image/addcart.png",
      current_price: null,
      showMask: false,
      showGiftList: false,
      timestamp: 0, //倒计时
    };
  },
  mixins: [MixinShowprice],
  onReady() {
    getApp().setTitle();
  },
  onLoad(options) {
    this.loginVolid = !Boolean(
      uni.getStorageSync("loginVolid").is_login_category
    );
    this.getData(options.id, options.company_id);
  },
  onUnload() {
    uni.$emit("updateclassify", () => {});
  },
  methods: {
    getData(id, company_id) {
      $https(
        "GET",
        "goodsDetail",
        {
          goods_id: id,
          company_id: company_id,
        },
        (res) => {
          if (res.data.errcode == 0) {
            if (res.data.data.spu.length < 1) {
              uni.showToast({
                icon: "none",
                title: "该商品已下架或被删除",
                success: () => {
                  setTimeout(() => {
                    this.leftClick();
                    return;
                  }, 2000);
                },
              });
            }
            this.data = res.data.data;
            let infos = this.formatRichText(this.data.detail);
            this.info = parseHtml(infos);
            this.describe = this.data.spu[0].describe || "";
            this.showPrice = this.data.spu[0].current_price
              ? "时价"
              : this.data.spu[0].activity_price
              ? `￥${this.data.spu[0].activity_price}`
              : `￥${this.data.spu[0].market_price}`;
            this.oldPrice = this.data.spu[0].activity_price
              ? this.data.spu[0].market_price
              : null;
            this.unit = this.data.spu[0].unit;
            this.min = this.data.spu[0].minimum;
            this.limit = this.data.spu[0].inventory_hd
              ? 1
              : this.data.spu[0].designated_inventory;
            this.max =
              this.data.spu[0].inventory_hd || this.data.spu[0].inventory_left; //活动库存优先
            this.spuId = this.data.spu[0].id;
            this.willBuyNum = this.data.spu[0].cart_num
              ? this.data.spu[0].cart_num
              : this.data.spu[0].minimum
              ? this.data.spu[0].minimum
              : 1;
            this.is_collect = this.data.is_collect;
            this.current_price = this.data.spu[0].current_price;
            if (this.data.full_activity_rule.length > 0) {
              //满减满赠
            } else {
              this.timestamp = this.data.panic_buy.end_time;
              var now = (new Date().getTime() / 1000).toFixed(0);
              this.timestamp =
                this.data.panic_buy.status == 1
                  ? this.data.panic_buy.end_time - now
                  : this.data.panic_buy.end_time - now;
            }
          } else {
            uni.showToast({
              icon: "none",
              title: res.data.errmsg,
              success: () => {
                this.showMask = true;
                setTimeout(() => {
                  this.leftClick();
                }, 2000);
              },
            });
          }
        },
        this.loginVolid
      );
    },
    leftClick() {
      // #ifdef H5
      window.history.back(-1);
      // #endif
      // #ifndef H5
      uni.navigateBack();
      // #endif
    },
    //选择规格
    changeSpe(index) {
      this.spuId = this.data.spu[index].id;
      this.willBuyNum = this.data.spu[index].cart_num
        ? this.data.spu[index].cart_num
        : this.data.spu[index].minimum;
      this.checked = index;
      this.min = this.data.spu[index].minimum;
      this.limit = this.data.spu[index].inventory_hd
        ? 1
        : this.data.spu[index].designated_inventory;
      this.max =
        this.data.spu[index].inventory_hd ||
        this.data.spu[index].inventory_left;
      this.showPrice = this.data.spu[index].current_price
        ? "时价"
        : this.data.spu[index].activity_price
        ? `￥${this.data.spu[index].activity_price}`
        : `￥${this.data.spu[index].market_price}`;
      this.oldPrice = this.data.spu[index].activity_price
        ? this.data.spu[index].market_price
        : null;
      this.unit = this.data.spu[index].unit;
      this.describe = this.data.spu[index].describe || "";
      this.current_price = this.data.spu[index].current_price;
    },
    //＋
    addAction(data) {
      var val = data.value,
        min = Number(this.min),
        max = Number(this.max),
        limit = Number(this.limit);
      if (val < min) {
        val = min;
      } else if (limit > 0 && val + 1 >= max) {
        //不能超过库存量
        val = max;
        uni.showToast({
          icon: "none",
          title: "库存不足",
        });
      } else {
        val++;
      }
      this.willBuyNum = Number(val.toFixed(2));
    },
    //-
    subAction(data) {
      var val = data.value;

      if (val - 1 < Number(this.min)) {
        val = 0;
      } else {
        val--;
      }
      this.willBuyNum = Number(val.toFixed(2));
    },
    //输入数量
    inputPrice(data) {
      this.willBuyNum = Number(Number(data.value).toFixed(2));
    },
    toCart() {
      uni.switchTab({
        url: "/pages/tabar/shopcart",
      });
    },
    //加入购物车
    addToCart() {
      if (this.willBuyNum > 0) {
        var options = {
          goods_id: this.data.id,
          spu_id: this.spuId,
          num: this.willBuyNum,
        };
        $https(
          "POST",
          `changeCart?company_id=${this.companyInfo.supplier_id}`,
          options,
          (res) => {
            if (res.data.errcode == 0) {
              uni.showToast({
                title: "成功加入购物车",
                icon: "none",
              });
            } else {
              uni.showToast({
                title: res.data.errmsg,
                icon: "none",
              });
            }
          }
        );
      } else {
        uni.showToast({
          title: "请选择数量",
          icon: "none",
        });
      }
    },
    // toBuy(){

    // 	uni.navigateTo({
    // 		url: `/pages/shopcart/submitorder?ids=[${this.data.id}]`
    // 	})
    // },
    formatRichText(html) {
      let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
        match = match
          .replace(/style="[^"]+"/gi, "")
          .replace(/style='[^']+'/gi, "");
        match = match
          .replace(/width="[^"]+"/gi, "")
          .replace(/width='[^']+'/gi, "");
        match = match
          .replace(/height="[^"]+"/gi, "")
          .replace(/height='[^']+'/gi, "");
        return match;
      });
      newContent = newContent.replace(
        /style="[^"]+"/gi,
        function (match, capture) {
          match = match
            .replace(/width:[^;]+;/gi, "max-width:100%;")
            .replace(/width:[^;]+;/gi, "max-width:100%;");
          return match;
        }
      );
      newContent = newContent.replace(/<br[^>]*\/>/gi, "");
      newContent = newContent.replace(
        /\<img/gi,
        '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
      );
      return newContent;
    },
    //加入收藏
    collectAction() {
      var status = this.is_collect == 1 ? 0 : 1;
      $https(
        "GETN",
        "collection",
        {
          status,
          goods_id: this.data.id,
        },
        (res) => {
          if (res.data.errcode == 0) {
            this.is_collect = status;
          }
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.u-drawer {
  overflow: unset !important;
}

page {
  background: $white;
}

.swiper_box {
  position: relative;

  .countdown {
    position: absolute;
    left: 0;
    bottom: 0;
    background: #3f3f3f;
    color: #fff;
    padding: 16rpx 24rpx;
    font-size: 24rpx;
    border-radius: 0 40rpx 40rpx 0;

    .time {
      margin-left: 20rpx;
    }
  }

  .swiper {
    height: 484rpx;
    .img {
      width: 100%;
      height: 100%;
      // background:pink;
    }
    .showPage {
      position: absolute;
      font-size: 22rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
      padding: 11rpx 21rpx;
      right: 30rpx;
    }
  }
}

.describe {
  /deep/img {
    width: 100%;
  }
}

// @media(max-width:600px) {
.shopdetail {
  .tags {
    margin-bottom: 8rpx;

    .tag {
      display: inline-block;
      font-size: 20rpx;
      padding: 2rpx 10rpx;
      // transform: scale(0.8);
      color: #fff;
      background: #f7c23e;
      border-radius: 8rpx;
      margin-right: 12rpx;
      white-space: nowrap;

      &.rule {
        border: 1px solid #f7c23e;
        color: #f7c23e;
        background: none;
      }

      &.gift {
        position: relative;
        padding-right: 50rpx;
        display: flex;
        background: none;
        border: 1px solid #f7c23e;
        color: #f7c23e;
        margin-right: 0;

        .over {
          // display: inline-block;
          max-width: 440rpx;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .icon {
          position: absolute;
          right: 0;
          margin: 4rpx 8rpx;
          font-size: 30rpx;
          vertical-align: baseline;
        }

        .giftLists {
          position: absolute;
          top: 46rpx;
          left: 0;
          right: 0;
          color: #747474;
          background: #fff;
          box-shadow: 0px 2rpx 8rpx 0px rgba(0, 0, 0, 0.2);
          border-radius: 0px 0px 6rpx 6rpx;
          z-index: 99;

          .list {
            padding: 12rpx 24rpx;
            white-space: pre-wrap;

            + .list {
              border-top: 1px solid #f3f3f3;
            }
          }
        }
      }
    }
  }

  .shop_logo {
    position: absolute;
    width: 192rpx;
    height: 116rpx;
    right: 40rpx;
    z-index: 9;
  }

  .custom-icon-xingxing {
    font-size: 44rpx;
  }

  .english_name {
    margin-top: 10rpx;
  }

  .shop_name {
    font-size: 36rpx;
    margin-right: 20rpx;
  }

  .describe {
    margin: 40rpx 0;
  }

  .add_to_cart,
  .buy_now {
    width: 280rpx;
    height: 80rpx;
    line-height: 80rpx;
  }

  .add_to_cart {
    width: 560rpx;
    border-radius: 200rpx;
  }

  .buy_now {
    border-radius: 0 200rpx 200rpx 0;
  }

  .shopdescibe {
    padding: 20rpx 20rpx 0;
    box-shadow: 0px -4px 5px rgba(0, 0, 0, 0.07);
    transform: translate3d(0, 0, 0);
    background-color: #f8f9fa;
    .desc {
      color: #737373;
      padding: 20rpx 0px 40rpx 0px;
    }

    .yellow_tag {
      font-size: 20rpx;
      padding: 2rpx 12rpx;
      background: #ff9900;
      border-radius: 6rpx;
      color: #fff;
    }
  }

  .back_button {
    margin-top: var(--status-bar-height);

    .custom-icon {
      font-size: 40rpx;
      margin-left: 20rpx;
    }
  }

  .buy_num {
    padding-bottom: 20rpx;

    .buynum {
      margin-top: 20rpx;

      > text {
        margin-right: 30rpx;
      }
    }

    .old_price {
      color: #ccc;
      margin-left: 10rpx;
      text-decoration: line-through;
    }
  }

  .select_ware {
    margin-top: 32rpx;
    padding-bottom: 30rpx;
    border-bottom: 1px solid #e7e8e8;

    text {
      padding: 0 10rpx;
    }

    .active {
      border-radius: 50rpx;
    }

    .spec {
      min-width: 100rpx;
      padding: 10rpx 24rpx;
      text-align: center;
    }
  }
}

// }

.shopdetail {
  background: #fff;
  padding-bottom: 120rpx;

  .back_button {
    position: fixed;
    z-index: 9;
    height: 44px;
    line-height: 44px;
  }

  .collect {
    flex-direction: column;
    white-space: nowrap;
  }

  .back_button .custom-icon {
    color: black;
    font-weight: bold;
  }

  .active {
    background: $dgreen;
    color: $white;
  }

  .add_to_cart {
    background: $dgreen;
  }

  .buy_now {
    background: $dgreen;
  }

  .add_to_cart,
  .buy_now {
    color: $white;
    text-align: center;
  }

  .describe {
    color: #737373;
  }

  .buy_num {
    // border-bottom: 1px solid #e7e8e8;
  }

  .buy {
    position: fixed;
    padding: 20rpx 0;
    background: $white;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

    .img {
      width: 60rpx;
      height: 60rpx;
      margin-left: 20rpx;
    }
  }
}
</style>
